/* Apply the same font on the whole page */
* {
	font-family: "Overpass", sans-serif;
	font-size: 20px;

	line-height: 1.5;
	margin-left: 0px; margin-right: 0px;
	margin-top: 0px; margin-bottom: 8px;

	--bg-brighter: #999999;
	--bg-primary: #e6e7ed;

	--btn-primary: #c3c3c3;

	--ft-primary: #000000;

	--clr-primary: #cc0000;
	--clr-white: #ffffff;

	--ease-cubic: cubic-bezier(0.08, 0.59, 0.29, 0.99);
}

::selection {
	background-color: var(--ft-primary);
	color: var(--bg-primary);
}

body {
	background: var(--bg-primary);
	color: var(--ft-primary);
	margin: 0 0;
}
	
.ft-header {
	font-family: "Bebas Neue", sans-serif;
}

.ft-mono {
	font-family: "Overpass Mono", monospace;
	font-weight: 900;
}

.centered {
	display: block;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: center;
}

.caption {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 16px;
}

strong {
	font-size: inherit;
	font-weight: 800;
}

.intro {
	margin-top: 35vh;
}

.outro {
	margin-top: 40vh;
	margin-bottom: 3vh;
}

.navbar-container {
	z-index: 1000; /* Ensures it stays on top */
	position: fixed;
	top: 0px;
	left: 0px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar-item {
	width: 5rem;
	height: 25px;
	padding: 15px 10px;

	color: var(--ft-primary);
	background-color: var(--bg-primary);

	transition:
		scale 0.25s var(--ease-cubic),
		font-weight 0.25s var(--ease-cubic);
}

.divider {
	border-top: 3px solid var(--ft-primary); 
	margin-top: 1rem; margin-bottom: 1rem;
}

.navbar-item:hover {
	scale: 1.05;
	font-weight: 900;
}

.navbar-item:active {
	scale: 0.95;
	font-weight: 100;
}

.reveal {
	opacity: 0;
	scale: 1.1;

	transition: 
		opacity 0.75s var(--ease-cubic), 
		scale 0.75s var(--ease-cubic);
}

.reveal.visible {
	opacity: 1;
	scale: 1;
}

#background {
	width: 100%;
	height: 20rem;
	overflow: hidden;
	display:flex;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0px;
	margin: 10px;
	padding: 0px;
	border: 0px;
}

#title {
	transform: translate(50%, -50%);
	font-size: 100px;
	background-color: var(--bg-primary);
	width: 50%;
}

h1 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 900;

	font-size: 80px;
	line-height: 1.2;
	margin-left: 0px; margin-right: 0px;
	margin-top: 8px; margin-bottom: 8px;
}

h2 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 800;

	font-size: 72px;
	line-height: 1.2;
	margin-left: 0px; margin-right: 0px;
	margin-top: 8rem; margin-bottom: 6rem;
}

h3 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 700;

	font-size: 64px;
	line-height: 1;
}

a {
	text-decoration: none;
	user-select: none;
}

.title {
	font-weight:800;
	
	font-size: 32px;
	line-height: 1.2;
	margin-left: 0px; margin-right: 0px;
	margin-top: 8px; margin-bottom: 8px;
}

.icon {
	width: 2rem;
	height: 2rem;
	object-fit: cover;
	margin: 0.5rem 2rem;
	padding: 0px;
	border: 0px;

	transition: scale 0.25s var(--ease-cubic);
}

.icon:hover {
	scale: 1.2
}

.icon:active {
	scale: 0.9
}

.arrow-down {
	width: 2rem;
	height: 2rem;
	position: fixed;
	bottom: 1rem;
	margin: 0;
	left: 49.15%;
	transition: scale 0.25s var(--ease-cubic);
	animation: pingPong 2s ease-in-out infinite alternate;
}

@keyframes pingPong {
	from {
		top: calc(100% - 75px);
	}

	to {
		top: calc(100% - 50px);
	}
}

.arrow-down-hidden {
	scale: 0;
	pointer-events: none;
}

.element {
	margin-top: 1rem; margin-bottom: 3rem;
	text-align: justify;
}

.image-container {
	width: 100%;
	height: 20rem;
	overflow: hidden;
	border-radius: 1.4rem;
	display:flex;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.image-item {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1.4rem;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.cover-container {
	width: 10rem;
	height: auto;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.cover-item {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1.6rem;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.grid-item {
	display: flex;
	width: 100%;
	height: 10rem;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.flex-container-row {
	display: flex;
	flex-direction: row;
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.flex-container-column {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 1.5rem;
	padding: 0px;
	border: 0px;
}

.flex-item {
	text-align: left;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.button {
	background-color: transparent;
	color: var(--ft-primary);
	margin: 0px;
	padding: 10px;
	border: 2px solid var(--ft-primary);
	border-radius: 2rem;
	height: 100%;
	width: 100%;
	overflow: hidden;

	transition:
		scale 0.5s var(--ease-cubic),
		background-color 0.5s var(--ease-cubic),
		color 0.5s var(--ease-cubic);
}

.button:hover {
	scale: 1.05;
	background-color: var(--ft-primary);
	color: var(--bg-primary);
}

.button:active {
	scale: 0.95;
	background-color: var(--bg-brighter);
	color: var(--ft-primary);
}

.play-button {
	position: absolute;
	color: var(--clr-white);
	font-size: 48px;
	font-weight: 900;
	opacity: 0.75;
	pointer-events: none;

	transition: opacity 0.5s var(--ease-cubic);
}

.image-container:hover .play-button {
	opacity: 1;
}
.visit-button {
	position: absolute;
	color: var(--clr-white);
	font-size: 48px;
	font-weight: 900;
	opacity: 0.75;
	pointer-events: none;

	transition: opacity 0.5s var(--ease-cubic);
}

.image-container:hover .visit-button {
	opacity: 1;
}

.play-background {
	filter: brightness(0.9);

	transition: filter 0.5s var(--ease-cubic);
}

.play-background:hover {
	filter: brightness(0.7);
}

.header-solo {
	height: 12rem;
}

.header-top {
	height: 5rem;
	padding: 0rem 0rem 1rem 0rem;
}

.header-bot {
	height: 5rem;
}